<template>
	<view>
		<view>
			<image class="topImage" src="../../static/image/bg2.png" mode=""></image>
			<view class=" bgw text-lg p30">
				<view class="list ">
					<view>商铺名称 :</view>
					<view><input maxlength="15" v-model="name" type="text" placeholder="请输入商铺名称" /></view>
				</view>
				<view class="list">
					<view>商铺简称 :</view>
					<view><input maxlength="11" v-model="nameAbbr" type="text" placeholder="请输入商铺简称" /></view>
				</view>
				<view class="list">
					<view>商铺地址 :</view>
					<view v-if="address == '请选择省市区' " @tap="addressTab()" style="color: #808080;">{{ address }}</view>
					<view v-if="address != '请选择省市区' " @tap="addressTab()">{{ address }}</view>
					<image class="go" src="../../static/image/go1.png" mode=""></image>
				</view>
				<view class="list list2">
					<view>详细地址 :</view>
					<view style="padding-top: 26rpx;"><textarea v-model="addresss" maxlength="30" placeholder="如街道、小区、楼牌号、单元门牌号等" /></view>
				</view>
			</view>

			<view class="mt30 bgw text-lg p30">
				<view class="list">
					<view>手机号 :</view>
					<view><input v-model="telephone" type="number" maxlength="11" placeholder="请输入商铺联系人电话" /></view>
				</view>
				<view class="list">
					<view>经营类目 :</view>
					<view v-if="labelTxt== '请选择经营类目' " @tap="labels()" style="color: #808080;">{{ labelTxt }}</view>
					<view v-if="labelTxt!= '请选择经营类目' " @tap="labels()" >{{ labelTxt }}</view>
					<image class="go" src="../../static/image/go1.png" mode=""></image>
				</view>
				<!-- <view class="list">
					<view>经营范围 :</view>
					<view><input v-model="businessScope" placeholder="请填写经营范围" /></view>
				</view> -->
				<view class="list">
					<view>营业日期 :</view>
					<view v-if="time1 == '请选择营业日期'" @tap="times()" style="color: #808080;">{{ time1 }}</view>
					<view v-if="time1 != '请选择营业日期'" @tap="times()">{{ time1 }}</view>
					<image class="go" src="../../static/image/go1.png" mode=""></image>
				</view>
				<view class="list">
					<view>开始时间 :</view>
					<view  v-if="time2 == '请选择开始时间'" @tap="times2()" style="color: #808080;">{{ time2 }}</view>
					<view  v-if="time2 != '请选择开始时间'" @tap="times2()">{{ time2 }}</view>
					<image class="go" src="../../static/image/go1.png" mode=""></image>
				</view>
				<view class="list">
					<view>结束时间 :</view>
					<view v-if="time3=='请选择结束时间'" @tap="times3()" style="color: #808080;">{{ time3 }}</view>
					<view v-if="time3 !='请选择结束时间'" @tap="times3()"  >{{ time3 }}</view>
					<image class="go" src="../../static/image/go1.png" mode=""></image>
				</view>
				<view class="list list2">
					<view>详细介绍 :</view>
					<view style="padding-top: 26rpx;"><textarea v-model="description" maxlength="50" placeholder="店铺介绍、活动详情（最多50个字符）" /></view>
				</view>
			</view>
			<!-- 身份证 -->
			<view class="idImage bgw p30">
				<p>上传身份证</p>
				<view v-if="!idcardFrontImg" @tap="tapImage(1)" class="img img1">
					<image src="../../static/image/xiangji.png" mode=""></image>
					正面照片
				</view>
				<view v-if="idcardFrontImg != ''" class="img img2">
					<image :src="idcardFrontImg"  mode="aspectFill"></image>
					<image @tap="removeImage(1)" class="removeImg" src="../../static/image/icon_quxiao@2x.png"></image>
				</view>
				<view v-if="!idcardBehindImg" @tap="tapImage(2)" class="img img1">
					<image src="../../static/image/xiangji.png" mode=""></image>
					反面照片
				</view>
				<view v-if="idcardBehindImg != ''" class="img img2">
					<image :src="idcardBehindImg"  mode="aspectFill"></image>
					<image @tap="removeImage(2)" class="removeImg" src="../../static/image/icon_quxiao@2x.png"></image>
				</view>
			</view>
			<!-- 商铺照片 -->
			<view class="idImage bgw p30">
				<p>上传图片</p>
				<view v-if="!doorImg" @tap="tapImage(3)" class="img img1">
					<image src="../../static/image/xiangji.png"  ></image>
					商铺门头照
				</view>
				<view v-if="doorImg != ''" class="img img2">
					<image :src="doorImg"  mode="aspectFill"></image>
					<image @tap="removeImage(3)"  class="removeImg" src="../../static/image/icon_quxiao@2x.png"></image>
				</view>
				<view v-if="!licenceImg" @tap="tapImage(4)" class="img img1">
					<image src="../../static/image/xiangji.png" mode=""></image>
					商铺营业执照
				</view>
				<view v-if="licenceImg != ''" class="img img2">
					<image :src="licenceImg"  mode="aspectFill"></image>
					<image @tap="removeImage(4)" class="removeImg" src="../../static/image/icon_quxiao@2x.png"></image>
				</view>
			</view>
		</view>
		<view class="buttonSend p30"><button @tap="send" class="btnbg ">保存</button></view>
		<w-picker mode="region" :defaultVal="['山东省', '济南市', '市中区']" :areaCode="['25', '2501', '250102']" :hideArea="false" @confirm="onConfirm" ref="region1"></w-picker>
		<!-- 选择店铺 -->
		<w-picker v-if="selectList != ''" mode="selector" @confirm="onConfirms" ref="selector" themeColor="#ff7c39" :selectList="selectList"></w-picker>
		<!-- 选择时间 -->
		<w-picker v-if="taimeArr1 != ''" mode="selector" @confirm="onConfirm1" ref="time" themeColor="#ff7c39" :selectList="taimeArr1"></w-picker>
		<!-- 开始时间 -->
		<wPickers mode="time" defaultVal="09:30" :current="false" :hasSecond="false" @confirm="onConfirm2" ref="time2" step="1"></wPickers>
		<!-- 结束时间 -->
		<wPickers mode="time" defaultVal="21:30" :current="false" :hasSecond="false" @confirm="onConfirm3" ref="time3" step="1"></wPickers>
	</view>
</template>

<script>
import wPicker from '@/components/w-picker/w-picker.vue';
import wPickers from '@/components/w-pickers/w-picker.vue';
import { storeCategoryList, applyShop } from '@/api/api.js';
import { datas1 } from './data.js';
export default {
	components: {
		wPicker,
		wPickers
	},
	data() {
		return {
			shakeState:0,
			name: '', //门店名称
			nameAbbr: '', // 门店简称
			areaId: '', // 所在区县
			province: '', // 所在省
			city: '', //所在市
			zone: '', // 所在区
			addresss: '', //详细地址
			longitude: '', //经度
			latitude: '', //维度
			telephone: '', //手机号
			businessScope: '', //经营范围
			description: '', //详细介绍
			salesman: '', //业务代表
			categoryId: '', //店铺类别
			doorImg: '', //门头照
			licenceImg: '', //营业执照
			idcardFrontImg: '', //身份证 正面
			idcardBehindImg: '', //身份证 反面
			businessHours: '', //营业时间
			address: '请选择省市区',
			selectList: [],
			labelTxt: '请选择经营类目',
			taimeArr1: datas1,
			time1: '请选择营业日期',
			time2: '请选择开始时间',
			time3: '请选择结束时间',
			tokens: ''
		};
	},
	created() {
		this.inits();
		this.init();
		this.tokens = uni.getStorageSync('token');
	},
	methods: {
		removeImage(e) {
			switch (e) {
				case 1:
					this.idcardFrontImg = '';
					break;
				case 2:
					this.idcardBehindImg = '';
					break;
				case 3:
					this.doorImg = '';
					break;
				case 4:
					this.licenceImg = '';
					break;
			}
		},
		// 上传图片
		tapImage(e) {
			uni.chooseImage({
				count: 1,
				success: res => {
					let fileImageArr = res.tempFilePaths[0];
					let imgUrl = '';
					uni.uploadFile({
						header: {
							token: this.tokens
						},
						url: this.$apis + 'apply/applyImg',
						filePath: fileImageArr,
						name: 'file',
						success: res => {
							let urls = res.data;
							urls = JSON.parse(urls);
							imgUrl = urls.url;
							switch (e) {
								case 1:
									this.idcardFrontImg = imgUrl;
									break;
								case 2:
									this.idcardBehindImg = imgUrl;
									break;
								case 3:
									this.doorImg = imgUrl;
									break;
								case 4:
									this.licenceImg = imgUrl;
									break;
							}
						}
					});
				}
			});
		},
		// 选择 日期
		onConfirm1(e) {
			this.time1 = e.result;
		},
		// 选择 日期
		onConfirm2(e) {
			this.time2 = e.result;
		},
		// 选择 日期
		onConfirm3(e) {
			this.time3 = e.result;
		},
		// 店铺选择
		onConfirms(e) {
			this.categoryId = e.checkArr.value;
			this.labelTxt = e.checkArr.label;
			this.businessScope = e.checkArr.label;
		},
		// 地址选择
		onConfirm(e) {
			let addresString = e.checkArr;
			addresString = addresString.join(' ');
			this.address = addresString;
			this.province = e.checkArr[0];
			this.city = e.checkArr[1];
			this.zone = e.checkArr[2];
			this.areaId = e.isd[2];
		},
		addressTab() {
			this.$refs['region1'].show();
		},
		labels() {
			this.$refs['selector'].show();
		},
		times() {
			this.$refs['time'].show();
		},
		times2() {
			this.$refs['time2'].show();
		},
		times3() {
			this.$refs['time3'].show();
		},
		send() {
			try {
				if (this.name == '') throw '门店名称不能为空';
				if (this.nameAbbr == '') throw '门店简称不能为空';
				if (this.address == '请选择省市区') throw '请选择省市区';
				if (this.addresss == '') throw '请填写详细地址';
				if (!/^1[3456789]\d{9}$/.test(this.telephone)) throw '手机号不正确';
				if (this.labelTxt == '请选择经营类目') throw '请选择经营类目';
				if (this.businessScope == '') throw '请填写经营范围';
				if (this.description == '') throw '请填写详细介绍';
				if (this.idcardFrontImg == '') throw '请上传正面照片';
				if (this.idcardBehindImg == '') throw '请上传反面照片';
				if (this.doorImg == '') throw '请上传商铺照片';
				if (this.licenceImg == '') throw '请上传营业执照';
				if (this.longitude == '') throw '请提供位置';
				if (this.time1 == '请选择营业日期') throw '请选择营业日期';
				if (this.time2 == '请选择开始时间') throw '请选择开始时间';
				if (this.time3 == '请选择结束时间') throw '请选择结束时间';
			} catch (err) {
				this.toast(err);
				if (err == '请提供位置') {
					this.inits();
				}
				return;
			}
			if(this.shakeState == 0){
				this.shakeState = 1
				this.sends();		
			} 
		},
		async sends() {
			let data = {
				name: this.name,
				nameAbbr: this.nameAbbr,
				province: this.province,
				city: this.city,
				zone: this.zone,
				address: this.addresss,
				longitude: this.longitude,
				latitude: this.latitude,
				telephone: this.telephone,
				businessScope: this.businessScope,
				categoryId: this.categoryId,
				doorImg: this.doorImg,
				licenceImg: this.licenceImg,
				idcardFrontImg: this.idcardFrontImg,
				idcardBehindImg: this.idcardBehindImg,
				description: this.description,
				businessHours: this.time1 + this.time2 + '至' + this.time3
			};
			let state = await applyShop(data);
			if (state.code == 0) {
				uni.showToast({
					title: '申请成功'
				});
				setTimeout(() => {
					uni.navigateBack({});
				}, 1000);
			}else{
				this.shakeState = 0
			}
		},
		async init() {
			let data = await storeCategoryList();
			data = data.datas;
			let arr = [];
			for (let i = 0; i < data.length; i++) {
				let array = {};
				array.label = data[i].name;
				array.value = data[i].categoryId;
				arr.push(array);
			}
			this.selectList = arr;
		},
		inits() { 
			this.longitude = uni.getStorageSync('longitude');
			this.latitude = uni.getStorageSync('latitude');
			if(this.longitude == ''){
				uni.getLocation({
				    type: 'wgs84',
				    success:(res)=>{
						this.longitude = res.longitude
						this.latitude =  res.latitude
				    }
				});
			}
		},
		toast(txt) {
			uni.showToast({
				title: txt,
				icon: 'none',
				mask: true,
				duration: 800
			});
		}
	}
};
</script>

<style lang="less" scoped>
@import './index.less';
</style>
